import styled from "styled-components";
interface propsv {
  top: number;
  left: number;
  height: number;
  width: number;
}
export const Routerranwrap = styled.div<propsv>`
  margin-left: ${(props: propsv) => props.left + "px"};
  margin-top: ${(props: propsv) => props.top + "px"};
  width: ${(props: propsv) => props.width + "px"};
  height: ${(props: propsv) => props.height + "px"};
  z-index: 10;
  /* background-color: gray; */
  display: flex;
  justify-content: center;
  align-self: center;
  #tiao {
    animation: tiaomov 2s linear alternate infinite;
    transform-box: fill-box;
    transform-origin: center;
  }
  #swing1 {
    animation: swing1 2s linear alternate infinite;
    transform-box: fill-box;
    transform-origin: 5px 0;
  }
  @keyframes tiaomov {
    from {
      transform: rotateZ(-10deg) translateX(10px);
    }
    to {
      transform: rotateZ(10deg) translateX(-10px);
    }
  }
  @keyframes swing1 {
    from {
      transform: rotateZ(-10deg);
    }
    to {
      transform: rotateZ(10deg);
    }
  }

  .smoke {
    transform-origin: 40% bottom;
    transform-box: fill-box;
    animation: 2.5s linear smoke infinite;
  }
  .smoke2 {
    animation: 4s linear 2s smoke infinite;
  }
  .building-smoke {
    animation: 2s linear 1s buildingsmoke alternate infinite;
  }
  .cloud {
    animation: 6s linear cloud alternate infinite;
  }
  @keyframes smoke {
    from {
      transform: scale(0);
      opacity: 1;
    }
    30% {
      transform: scale(0.7) translateY(-10px);
    }
    60% {
      opacity: 1;
    }
    to {
      transform: scale(2) translateY(-100px);
      opacity: 0;
    }
  }
  @keyframes buildingsmoke {
    from {
      opacity: 1;
    }
    to {
      opacity: 0.5;
    }
  }
  @keyframes cloud {
    from {
      transform: translateX(-400px);
    }
    to {
      transform: translateX(100px);
    }
  }
`;
